<script setup>
import useCounterStore from "@/pinia/stores/counter";
import {storeToRefs} from "pinia";

const counterStore = useCounterStore()
/*直接解构store不是响应式的，必须借助storeToRefs()函数
const {counter} = counterStore*/
const {counter} = storeToRefs(counterStore)

const change = () => {
  counterStore.counter++
}
</script>

<template>
  <div class="layui-panel">
    <h1>home组件</h1>
    <h3>useCounterStore中state的counter值是：{{ counterStore.counter }}</h3>
    <h3>useCounterStore中state的counter值是：{{ counter }}</h3>
    <button type="button" class="layui-btn layui-btn-normal" @click="change">修改counterStore的counter</button>
  </div>
</template>

<style scoped lang="less"></style>